<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>京东</title>
  <style>
	* {
		margin: 0;
		padding: 0;
		font-size: 12px;
	}
	a {text-decoration: none;}
	li {list-style: none;}

	/*页面顶部-begin*/
	.top {
		width: 990px;
		/* height: 57px;    清除浮动未成功，给了高度 */
		margin: 12px auto;
		/* border: 1px solid blue; */
	}
	.clearfix:after {
		content: '';
		display: block;
		clear: both;
	}
	.logo {
		float: left;
		width: 171px;
		height: 57px;
		background: url('img/logo.png') no-repeat;
		/* border: 1px solid red; */
	}
	.hygl {
		width: 110px;
		height: 29px;
		margin: 20px 180px;
		background: url('img/l-icon.png') no-repeat;
	}
	.dca {
		float: right;
		padding-left: 20px;
		margin-top: 34px;
		background: url('img/q-icon.png') no-repeat;
		background-position: 0 2px;
		/* border: 1px solid red; */
	}
	/*页面顶部-end*/

	/*页面中部-begin*/
	.section {
		background: #e93854;
	}

	/*京东隐私政策-begin*/
	.law {
		width: 100%;
		height: 37px;
		background: #fff8f0;
	}
	.lawtext {
		width: 776px;
		margin: auto;
		padding-left: 20px;
		background: url('img/icon-tips.png') no-repeat;
		background-position: 0 11px;
		/* border: 1px solid red; */
		line-height: 37px;
		color: #999;
	}
	.lawtext .black {
		color: #333;
	}
	.lawtext .black:hover {
		text-decoration: underline;
	}
	/*京东隐私政策-end*/

	/*页面中部-begin*/
	.content {
		position: relative;
		width: 990px;
		height: 475px;
		margin: auto;
		background: url('img/bg.png') no-repeat;
	}

	/*登录框-begin*/
	.login {
		position: absolute;
		top: 10px;
		right: 10px;
		width: 346px;
		/* height: 400px;  最后清除高度 */
		/* background: yellow; */
		/* border: 1px solid #fff; */
	}
	.login-top {
		padding: 10px 20px;
		background: #fff8f0;
	}
	.icon-tips {
		width: 16px;
		height: 16px;
		display: inline-block; /*不打这个i无法显示*/
		vertical-align: middle; /*垂直对齐*/
		background: url('img/icon-tips.png') no-repeat;
	}
	.login-top p {
		color: #999;
		vertical-align: middle;
		display: inline-block;
	}
	

	/* 账号密码登录*/
	/*登录选择框-begin*/
	.smzh_dl {
		position: relative;
		width: 346px;
		height: 55px;
		background: #fff;
		border-bottom: 1px solid #f4f4f4;
	}
	.smzh_dl ul li {
		float: left;
		width: 172px;
		height: 54px;
		text-align: center;
	}
	.smzh_dl ul li a {
		display: inline-block;
		width: 173px;
		margin-top: 18px;
		color: #666;
		font-size: 18px;
	}
	.smzh_dl ul li a:hover {
		color: red;
		/* font-weight: ; */
	}
	.smzh_dl ul li:nth-child(1) a {
		border-right: 1px solid #f4f4f4;
	}
	.smzh_dl li a.smbtn {
		color: red;
	}
	/*登录选择框-end*/
	


	/* .sm-zhdl{width: 332px;height: 301px;} */




	/*扫码登录界面-begin*/
	.smdl_sr {
		/* display: none; */
		position: relative;
		background: #fff;
		padding: 10px 0 10px 10px;
		text-align: center;
	}
	.smdl_sr .code_phone {
		width: 332px;
		height: 169px;
		margin: 0 15px 0 88px;
	}
	.smdl_sr .code_phone .code {
		float: left;
		width: 147px;
		height: 147px;
		padding: 10px;
		margin-right: 15px;
		border: 1px solid #f4f4f4;
	}
	.smdl_sr .code_phone .phone {
		display: none;
		float: left;
		width: 148px;
		height: 168px;
	}
	.smdl_sr .code_phone:hover div.phone {
		display: block;
	}
	.smdl_sr .code_phone:hover {
		margin-left: 0;
		transform: 1s;
	}
	.smdl_sr p {
		margin: 15px 0;
	}
	.smdl_sr a {
		color: red;
	}
	.smdl_sr p .qr1,.qr2,.qr3 {
		display: inline-block;
		width: 25px;
		height: 25px;
		vertical-align: middle;
		margin: 0 5px 0 12px;
		background: url('img/qr-coagent.png');
	}
	/*扫码登录界面-end*/





	/*账号登录界面-begin*/
	 .zhdl_sr {
		display: none;
		position: relative;
		width: 346px;
		height: 245px;
		background: #fff;
		/* border: 1px solid red; */
	}
	.zhdl_sr ul.dl {
		position: absolute;
		top: 30px;
		left: 15px;
		background: #fff;
		/* border: 1px solid red; */
	}
	ul.dl li.zhanghao,li.mima {
		border: 1px solid #bdbdbd;
		margin-bottom: 20px;
	}
	ul.dl li.zhanghao:before,li.mima:before {
		content: '';
		display: inline-block;
		width: 38px;
		height: 38px;
		background: url('img/pwd-icons-new.png') no-repeat;
		vertical-align: middle;
		border-right: 1px solid #bdbdbd;
	}
	ul.dl li.mima:before {
		background-position: -48px 0;
	}
	ul.dl li.zhanghao input,li.mima input {
		width: 254px;
		padding: 10px;
		border: none; /* 去掉input边框 */
		outline: none;  /* 去掉获取焦点时的边框 */
		/* font-family: '5b8b4f53'; */
	}
	ul.dl li input::placeholder {
		/*控制input元素的placehoder(注释)属性*/
		color: #afafaf;
	}
	ul.dl li:nth-child(3) a {
		color: #666;
		float: right;
		margin-right: 2px;
	}
	ul.dl li:nth-child(3) a:hover {
		color: red;
		text-decoration: underline;
	}
	ul.dl li:nth-child(4) a {
		display: inline-block;
		width: 318px;
		height: 31px;
		margin-top: 20px;
		font-size: 20px;
		background: #e4393c;
		text-align: center;
		line-height: 31px;
		color: #fff;
		border: 1px solid #e85356;
	}
	/*账号登录界面-end*/
	
	/*QQ-微信-注册-begin*/
	.login-foot {
		position: relative;
		width: 331px;
		height: 60px;
		padding-left: 15px;
		background: #fcfcfc;
		border-top: 1px solid #f4f4f4;
	}
	.login-foot .qq-wx li {
		float: left;
		padding: 0 10px; 
		margin-top: 20px;
		/* line-height: 30px; */
	}
	.login-foot .qq-wx li:nth-child(1) {
		border-right: 1px solid #bdbdbd;;
	}
	.login-foot .qq-wx li a {
		color: #666;
	}
	.login-foot .qq-wx li a:hover {
		color: red;
		text-decoration: underline;
	}
	.qq-wx li:nth-child(1) .qq {
		display: inline-block;
		vertical-align: middle;
		width: 20px;
		height: 20px;
		margin-right: 3px;
		background: url('img/QQ-weixin.png') no-repeat;
		background-position: 0 1px; 
	}
	.qq-wx li:nth-child(2) .wx {
		display: inline-block;
		width: 20px;
		height: 20px;
		vertical-align: middle;
		margin-right: 3px;
		background: url('img/QQ-weixin.png') no-repeat -20px 1px;
	}
	.login-foot .qq-wx li:nth-child(3) {
		float: right;
	}
	.qq-wx li:nth-child(3) .zc {
		display: inline-block;
		width: 20px;
		height: 20px;
		vertical-align: middle;
		margin-right: 3px;
		background: url('img/pwd-icons-new.png') no-repeat -103px -74px;
	}
	/*QQ-微信-注册-end*/
	/*登录框-end*/

	/*页面中部-end*/
	
	/*页面底部-begin*/
	.nav {
		width: 812px;
		/* border: 1px solid red; */
		margin: 24px auto;
		text-align: center;
	}
	.nav a {
		display: inline-block;
		padding: 0 10px;
		color: #666;
		border-right: 1px solid #666;
	}
	.nav a.last {
		border: none;
	}
	.nav a:hover {
		color: red;
		text-decoration: underline;
	}
	.nav p {
		margin-top: 12px;
		color: #666;
	}
	/*页面底部-end*/
  </style>



 </head>
 <body>
	<div class='top clearfix'>
		<div class='logo'>
			<div class='hygl'>
			</div>
		</div>
		<a class='dca clearfix' href=''>登录页面，调查问卷</a>
	</div>

	<div class='section'>
		<div class='law'>
			<div class='lawtext'>
				<p>依据《网络安全法》，为保障您的账户安全和正常使用，请尽快完成手机号验证！ 新版
					<a class='black' href=''>《京东隐私政策》</a>已上线，将更有利于保护您的个人隐私。
				</p>
			</div>
		</div>

		<div class='content'>
			<div class='login'>
				<div class='login-top'>
					<i class='icon-tips'></i>
					<p>京东不会以任何理由要求您转账汇款，谨防诈骗。</p>
				</div>
				<div class='smzh_dl'>
					<ul>
						<li><a class='smbtn' href='javascript:void(0)'>扫码登录</a></li>
						<li><a class='zhbtn' href='javascript:void(0)'>账号登录</a></li>
					</ul>
				</div>

				<!-- 账号登录框-begin -->
				<div class='zhdl_sr'>
					<ul class='dl'>
						<li class='zhanghao'>
							<input type='text' placeholder='邮箱/用户名/已验证手机' />
						</li>
						<li class='mima'>
							<input type='password' placeholder='密码' />
						</li>
						<li class='wjmm'><a href=''>忘记密码</a></li>
						<li class='dl_btn'><a href=''>登录</a></li>
					</ul>
				</div>
				<!-- 账号登录框-end -->

				<!-- 扫码登录框-begin -->
				<div class='smdl_sr'>
					<div class='code_phone'>
						<div class='code'>
							<img src='img/show (1).png'>
						</div>
						<div class='phone'>
							<img src='img/phone-orange.png'>
						</div>
					</div>
					<p class='phone_sm'>打开<a href=''>手机京东</a> 扫描二维码</p>
					<p>
						<i class='qr1'></i>免输入
						<i class='qr2'></i>更快
						<i class='qr3'></i>更安全
					</p>
				</div>
				<!-- 扫码登录框-end -->




				<div class='login-foot'>
					<ol class='qq-wx'>
						<li>
							<a href=''><i class='qq'></i>QQ</a>
						</li>
						<li>
							<a href=''><i class='wx'></i>微信</a>
						</li>
						<li>
							<a href=''><i class='zc'></i>立即注册</a>
						</li>
					</ol>
				</div>
				

			</div>
		</div>

	</div>

	<div class='footer'>
		<div class='nav'>
			<a href=''>关于我们</a>
			<a href=''>联系我们</a>
			<a href=''>人才招聘</a>
			<a href=''>商家入驻</a>
			<a href=''>广告服务</a>
			<a href=''>手机京东</a>
			<a href=''>友情链接</a>
			<a href=''>销售联盟</a>
			<a href=''>京东社区</a>
			<a href=''>京东公益</a>
			<a class='last' href=''>English Site</a>
			<p>Copyright © 2004-2018  京东JD.com 版权所有</p>
		</div>
	</div>
 </body>
 <script>
		var oSmbtn = document.querySelector('.smbtn');
		var oZhbtn = document.querySelector('.zhbtn');
		var oSmdl_sr = document.querySelector('.smdl_sr');
		var oZhdl_sr = document.querySelector('.zhdl_sr');

		oSmbtn.onclick = sm;
		function sm(){
			oSmdl_sr.style.display = 'block';
			oZhdl_sr.style.display = 'none';
			oSmbtn.style.color = 'red';
			oZhbtn.style.color = '#666';
		}
		oZhbtn.onclick = zh;
		function zh(){
			oSmdl_sr.style.display = 'none';
			oZhdl_sr.style.display = 'block';
			oSmbtn.style.color = '#666';
			oZhbtn.style.color = 'red';
		}
		
		
 </script>
</html>
<!--依然存在一些问题
	1.二维码和手机图片一直移动
	2.点击账号登录和扫码登录之后的a标签hover不出现问题
	3.二维码移动太快
-->

